import React,{Component}  from 'react';
import {connect} from 'react-redux';
var _ = require('lodash');

class Carts extends Component{
    render(){
        const {carts} = this.props;
        var cartsList = _.uniqWith(carts,_.isEqual);
        var len=cartsList.length;
        var output = [];
        var totalPrice=0;
        for(let i =0;i<len;i++){
            var imgPath="http://localhost:3000/"+cartsList[i].img[0].filename;
            var count=cartsList[i].price*cartsList[i].quantity;
            totalPrice+=count;
            output.push(
                <tr  key={i}>
                    <td scope="row">{i+1}</td>
                    <td><img src={imgPath}/></td>
                    <td className="titleTd">{cartsList[i].name}</td>
                    <td>{cartsList[i].price.toFixed(2)}</td>
                    <td>{cartsList[i].quantity}</td>
                    <td>{count.toFixed(2)}</td>
                    <td>
                        <a href="javascript:void(0)">删除</a>
                    </td>
                </tr>
            )
        }
        return (
            <div id="cart">
                <div className="bs-example" data-example-id="striped-table">
                    <table className="table table-striped">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>图片</th>
                                <th>商品名称</th>
                                <th>单价(元)</th>
                                <th>数量</th>
                                <th>小计(元)</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {output}
                        </tbody>
                        <tfoot>
                            <tr>
                                <td className="mount" colSpan="6">总计：{totalPrice.toFixed(2)}</td>
                                <td className="go"><a href="javascript:void(0)">去结算</a></td>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            </div>
        )
    }
}

const getValue = (state)=>{
    return {
        carts: state.reducer.carts
    }
}
const CartsContext = connect(getValue)(Carts)
module.exports = CartsContext;